﻿<ribbon:RibbonWindow x:Class="ExpenseTypes"
					 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
					 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
					 xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
					 Title="Setup Expense Types"
					 x:Name="ExpenseTypes"
					 WindowStartupLocation="Manual"
					 Width="700" Height="550">

	<ribbon:RibbonWindow.Resources>
		<Style TargetType="Label" x:Key="MyLabel">
			<Setter Property="Foreground" Value="White" />
			<Setter Property="FontSize" Value="50"/>
			<Setter Property="Background" Value="LightBlue" />
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Label}">
						<Border BorderThickness="{TemplateBinding BorderThickness}"
								BorderBrush="{TemplateBinding BorderBrush}"
								Padding="{TemplateBinding Padding}"
								SnapsToDevicePixels="true">
							<Grid>
								<Rectangle Fill="{TemplateBinding Background}">
									<Rectangle.OpacityMask>
										<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
											<GradientStop Color="#80000000" Offset="0.0" />
											<GradientStop Color="#E6000000" Offset="0.5" />
											<GradientStop Color="#80000000" Offset="1.0" />
										</LinearGradientBrush>
									</Rectangle.OpacityMask>
								</Rectangle>
								<ContentPresenter
									HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
									VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
									RecognizesAccessKey="True"
									SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
							</Grid>
						</Border>
						<ControlTemplate.Triggers>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Foreground"
										Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

		<Style x:Key="{x:Type ListBoxItem}" TargetType="{x:Type ListBoxItem}">
			<Setter Property="OverridesDefaultStyle" Value="true" />
			<Setter Property="Background" Value="Transparent" />
			<Setter Property="BorderBrush" Value="Transparent" />
			<Setter Property="BorderThickness" Value="1" />
			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
			<Setter Property="VerticalContentAlignment" Value="Center" />
			<Setter Property="Padding" Value="3" />
			<Setter Property="Opacity" Value=".80" />
			<Setter Property="LayoutTransform">
				<Setter.Value>
					<ScaleTransform ScaleX="1" ScaleY="1"/>
				</Setter.Value>
			</Setter>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type ListBoxItem}">
						<Border Background="{TemplateBinding Background}" 
								BorderBrush="{TemplateBinding BorderBrush}" 
								BorderThickness="{TemplateBinding BorderThickness}" 
								Padding="{TemplateBinding Padding}">
							<ContentPresenter x:Name="ContentSite" 
											  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
											  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Border>
						<ControlTemplate.Triggers>
							<Trigger Property="IsSelected" Value="true">
								<Setter Property="Background">
									<Setter.Value>
										<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
											<LinearGradientBrush.GradientStops>
												<GradientStop Offset="0" Color="LightGray"/>
												<GradientStop Offset="1" Color="DarkGray"/>
											</LinearGradientBrush.GradientStops>
										</LinearGradientBrush>
									</Setter.Value>
								</Setter>
								<Setter Property="BorderBrush" Value="Silver" />
								<Setter Property="Opacity" Value="1"/>
							</Trigger>
							<MultiTrigger>
								<MultiTrigger.Conditions>
									<Condition Property="IsSelected" Value="true" />
									<Condition Property="Selector.IsSelectionActive" 
											   Value="false" />
								</MultiTrigger.Conditions>
								<Setter Property="Background" Value="LightGray" />
								<Setter Property="BorderBrush" Value="DarkGray" />
							</MultiTrigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
			<Style.Triggers>
				<Trigger Property="IsEnabled" Value="false">
					<Setter Property="Foreground" Value="Gray" />
				</Trigger>
				<EventTrigger RoutedEvent="Mouse.MouseEnter">
					<EventTrigger.Actions>
						<BeginStoryboard>
							<Storyboard>
								<!--DoubleAnimation Duration="0:0:0.0"                                                 
												 Storyboard.TargetProperty="(ListBoxItem.LayoutTransform).(ScaleTransform.ScaleY)"
												 From="1" To="1.125"/>
									<DoubleAnimation Duration="0:0:0.0"                                                 
												 Storyboard.TargetProperty="(ListBoxItem.LayoutTransform).(ScaleTransform.ScaleX)"
												 From="1" To="1.125"/-->
								<DoubleAnimation Duration="0:0:0.2"
												 Storyboard.TargetProperty="Opacity"
												 To="1.0" />
							</Storyboard>
						</BeginStoryboard>
					</EventTrigger.Actions>
				</EventTrigger>
				<EventTrigger RoutedEvent="Mouse.MouseLeave">
					<EventTrigger.Actions>
						<BeginStoryboard>
							<Storyboard>
								<!--DoubleAnimation Duration="0:0:0.0"
												 Storyboard.TargetProperty="(ListBoxItem.LayoutTransform).(ScaleTransform.ScaleY)"
												 From="1.125" To="1"/>
									<DoubleAnimation Duration="0:0:0.0"                                                 
												 Storyboard.TargetProperty="(ListBoxItem.LayoutTransform).(ScaleTransform.ScaleX)"
												 From="1.125" To="1"/-->
								<DoubleAnimation Duration="0:0:0.2"
												 Storyboard.TargetProperty="Opacity" />
							</Storyboard>
						</BeginStoryboard>
					</EventTrigger.Actions>
				</EventTrigger>
			</Style.Triggers>
		</Style>
		<DataTemplate x:Key="listBoxTemplate">
			<Border BorderBrush="Blue"
					BorderThickness="1"
					CornerRadius="1"
					Margin="1">
				<StackPanel Orientation="Vertical">
					<StackPanel Orientation="Horizontal">
						<TextBlock Text="{Binding ExpenseName}"
							   Foreground="Blue" 
							   FontWeight="Bold"
								   Name="regoNumber"
								   Margin="1"/>						
					</StackPanel>					
				</StackPanel>

			</Border>
		</DataTemplate>
	</ribbon:RibbonWindow.Resources>

	<Grid>

		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<ribbon:Ribbon x:Name="Ribbon" Grid.Row="0">
			<ribbon:RibbonTab x:Name="HomeTab"
							  Header="Expenses">
				<ribbon:RibbonGroup x:Name="Action"
									Header="Action">
					<ribbon:RibbonButton Label="New" 
										 Name="RibbonButtonNew"
										 LargeImageSource="/images/new_page-32.png" />
					<ribbon:RibbonButton Label="Save" 
										 Name="RibbonButtonSave"
										 LargeImageSource="/images/filesave-32.png" />
					<ribbon:RibbonButton Label="Delete" 
										 Name="RibbonButtonDelete"
										 LargeImageSource="/images/Delete-32.png" />
					<ribbon:RibbonButton Label="Cancel" 
										 Name="RibbonButtonCancel"
										 LargeImageSource="/images/cancel-32.png" />
				</ribbon:RibbonGroup>
				
			</ribbon:RibbonTab>
		</ribbon:Ribbon>
		<Grid Grid.Row="1">
			<Grid>
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto"></ColumnDefinition>
					<ColumnDefinition Width="*"></ColumnDefinition>
				</Grid.ColumnDefinitions>
				<Expander Width="Auto" ExpandDirection="Right" HorizontalAlignment="Right" Grid.Column="0" >
					<Expander.Header>
						<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0" Width="Auto" Name="ExpanderText">
							<TextBlock.LayoutTransform>
								<TransformGroup>
									<ScaleTransform ScaleX="1" ScaleY="1"/>
								<SkewTransform AngleX="0" AngleY="0"/>
								<RotateTransform Angle="90"/>
								<TranslateTransform X="0" Y="0"/>
							</TransformGroup>
						</TextBlock.LayoutTransform>
						<TextBlock.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="1" ScaleY="1"/>
								<SkewTransform AngleX="0" AngleY="0"/>
								<RotateTransform Angle="0"/>
								<TranslateTransform X="0" Y="0"/>
							</TransformGroup>
						</TextBlock.RenderTransform>
						</TextBlock>
					</Expander.Header>
					<Border Name="borderHeader" BorderBrush="Gray" BorderThickness="1,1,1,1" CornerRadius="6,6,6,6">
						<Grid Name="gridListbox">
							<Grid.RowDefinitions>
								<RowDefinition Height="auto"></RowDefinition>
								<RowDefinition></RowDefinition>
							</Grid.RowDefinitions>

							<TextBox MinHeight="10" MinWidth="126" Margin="2" Name="searchBox" Grid.Row="0">Search</TextBox>

							<ListBox Name="listBoxExpense" 
								 Grid.Row="1"
								 VerticalAlignment="Top"
								 ItemTemplate="{StaticResource listBoxTemplate}" 
								 ItemContainerStyle="{DynamicResource ListBoxItem}" 
								 HorizontalContentAlignment="Stretch"                                                          
								 ItemsSource="{Binding ElementName=ExpenseTypes, Path=expenseTypeList}" 
								 BorderThickness="0"></ListBox>
						</Grid>
					</Border>
				</Expander>
				<!-- expander -->

				<Border Name="borderCentre" 
					BorderBrush="Gray"
					BorderThickness="1,1,1,1"
					CornerRadius="0,0,6,6"
					Grid.Column="1">
					<StackPanel>
						<Grid Name="GridExpense">
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="Auto"></ColumnDefinition>
								<ColumnDefinition Width="Auto"></ColumnDefinition>
							</Grid.ColumnDefinitions>
							<Grid.RowDefinitions>
								<RowDefinition Height="*"></RowDefinition>
								<RowDefinition Height="*"></RowDefinition>
								<RowDefinition Height="*"></RowDefinition>
                                <RowDefinition Height="*"></RowDefinition>
							</Grid.RowDefinitions>
							<Label Grid.Column="0" Grid.Row="0" Margin="5,5,5,0" HorizontalAlignment="Right">Name</Label>
							<TextBox Grid.Row="0"  Grid.Column="1"  HorizontalAlignment="Left" Margin="5,5,5,0" Name="TextBoxExpenseName" Width="250" />
							<Label Grid.Column="0" Grid.Row="1" Margin="5,5,5,0" HorizontalAlignment="Right">Auto Trans</Label>
							<CheckBox  Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" Margin="5,5,5,0" Name="CheckBoxIsAutodeduct" VerticalAlignment="Center" IsChecked="False"/>
                            <Label Grid.Column="0" Grid.Row="2" Margin="5,5,5,0" HorizontalAlignment="Right">One-Off</Label>
                            <CheckBox  Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left" Margin="5,5,5,0" Name="CheckBoxIsOneOff" VerticalAlignment="Center" IsChecked="False"/>
                            <Label Grid.Column="0" Grid.Row="3" Margin="5,5,5,0" HorizontalAlignment="Right">Comment</Label>
							<TextBox Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" Margin="5,5,5,0" Name="TextBoxComment" Width="317" Height="90" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible" AcceptsReturn="True"  />
						</Grid>
					</StackPanel>
				</Border>
				<Border Name="mainOverlay" Grid.Column="1" CornerRadius="6,6,6,6">
					<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="LightBlue">
						<DockPanel.OpacityMask >
							<LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,1">
								<GradientStop Color="#80000000" Offset="0.0" />
								<GradientStop Color="#E6000000" Offset="0.5" />
								<GradientStop Color="#80000000" Offset="1.0" />
							</LinearGradientBrush>
						</DockPanel.OpacityMask >
						<Label  VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource MyLabel}">empty record</Label>
					</DockPanel>
				</Border>
				<!-- overlay -->
			</Grid>
		</Grid>
	</Grid>
</ribbon:RibbonWindow>
